<template>
  <el-dialog
    :title="dialogObj.title"
    append-to-body
    :visible.sync="dialogObj.show"
    :close-on-click-modal="false"
    width="700px"
    class="abow_dialog"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      :rules="rules"
      :disabled="dialogObj.read"
      v-if="dialogObj.show"
    >
      <el-form-item label="主题名称：" prop="name">
        <el-input
          v-model="form.name"
          style="width:200px;"
          size="mini"
          placeholder="请输入主题名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="主题描述：" prop="description">
        <el-input
          v-model="form.description"
          style="width:200px;"
          size="mini"
          placeholder="请输入主题描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="栏目修改：">
        <el-input
          v-model="modifyColumn"
          style="width:200px;"
          size="mini"
          placeholder="请输入栏目名称"
        ></el-input>
      </el-form-item>
      <el-button type="primary" @click="addFirstTree" size="mini"
        >新增一级栏目</el-button
      >
      <div class="custom-tree-container">
        <div class="block">
          <el-tree
            :data="form.channels"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button type="text" size="mini" @click="() => append(data)">
                  新增
                </el-button>
                <el-button type="text" size="mini" @click="() => modify(data)">
                  修改
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)"
                >
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
    </el-form>
    <div class="operate-footer" v-if="!dialogObj.view">
      <el-button type="primary" @click="sub" size="mini">确 定</el-button>
      <el-button @click="dialogObj.show = false" size="mini">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { _debounce } from "@u/debounce";
import _ from "lodash";
import {
  getAddThemeListApi,
  getUpdateThemeListApi,
  getDetailThemeListApi,
} from "@s/api";
export default {
  name: "dialogCom",
  props: ["dialogObj"],
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      },
      modifyColumn: "",
      form: {
        name: "",
        description: "",
        channels: [],
      },
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {
    init() {
      if (this.dialogObj.id) {
        this.getDetailInfo(this.dialogObj.id);
        this.form.name = this.dialogObj.form.name;
        this.form.description = this.dialogObj.form.description;
        this.form.channels = this.dialogObj.form.channels;
      } else {
        this.form.name = "";
        this.form.description = "";
        this.form.channels = []
      }
    },
    addFirstTree() {
      this.form.channels.push({ label: "默认栏目", children: [] });
    },
    getDetailInfo(id) {
      getDetailThemeListApi(id).then((res) => {
        this.form.channels = res.channels
      });
    },
   
    addSub() {
  
      if (this.dialogObj.id) {
        let json = {
        id:this.dialogObj.id,
        description: this.form.description,
        name: this.form.name,
        channels: this.form.channels,
      };
        getUpdateThemeListApi(json).then(() => {
          this.dialogObj.show = false;
          this.$emit("reflash");
          this.$message({
            type: "success",
            message: "编辑主题成功！",
          });
        });
      } else {
         let addJson = {
        description: this.form.description,
        name: this.form.name,
        channels: this.form.channels,
      };
        getAddThemeListApi(addJson).then(() => {
          this.dialogObj.show = false;
          this.$emit("reflash");
          this.$message({
            type: "success",
            message: "添加主题成功！",
          });
        });
      }
    },
    append(data) {
      const newChild = { label: "默认栏目", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    modify(data) {
      if (this.modifyColumn === "") {
        this.$message({
          type: "error",
          message: "请输入栏目修改名称",
        });
        return;
      }
      data.label = this.modifyColumn;
      this.modifyColumn = "";
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.label === data.label);
      children.splice(index, 1);
    },
    sub: _debounce(function() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.addSub();
        }
      });
    }),
  },
  watch: {
    "dialogObj.show"(val) {
      if (val) {
        this.init();
      }
    },
  },
};
</script>
<style scoped lang="scss">
.operate-footer {
  text-align: center;
}
</style>
